<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>CSS样式</title>
        <meta name='keywords' content=''  />
        <meta name='description' content='' />
        <style>
            div{
                width:100px;height:100px;
                border:1px solid red;
            }
            div.c1{background-color:red;}
            div.c2{background-color:green;}
            div.c3{background-color:blue;
                   position:relative;
                   left:200px;
                   top:0px;
                   z-index:-999;
            }
            /*
                相对定位  position:relative; 
                1)相对于自已原来的位置                
                2)不设置偏移量,原地不动
                3)left 相对左边
                  right 相对右边
                  top 相对上边
                  bottom 相对下边
                4)z-index 设置层叠关系    值越大越靠上,值越小越靠下
                5)默认原位置还保留
            */
            div.c4{background-color:yellow;}
        </style>
    </head>
    <body>
        <h2>CSS样式实例:相对定位</h2>
        <div class='c1'></div>
        <div class='c2'></div>
        <div class='c3'></div>
        <div class='c4'></div>
    </body>
</html>